<template>
  <div class="Index">

    <el-container>

      <!--头部-->
      <el-header>
        <img src="./../assets/logo.png" alt="">
        <h2>vue电商后台管理系统</h2>
        <p>
        欢迎回来~<a href="javascript:;" @click="logout">退出</a>
        </p>
      </el-header>

      <!--底部-->
      <el-container>
        <!--左边-->
        <el-aside width="200px">

          <el-menu
            router
            :default-active="defaultActive"
            unique-opened
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="border-right: none;">

            <el-submenu :index="menu.path" v-for="menu in menuList" :key="menu.id">
              <!-- 一级菜单 -->
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{ menu.authName }}</span>
              </template>
              <!-- 二级菜单 -->
              <el-menu-item :index="item.path" v-for="item in menu.children" :key="item.id">
                <i class="el-icon-menu"></i>
                <span slot="title">{{ item.authName }}</span>
              </el-menu-item>

            </el-submenu>

          </el-menu>

        </el-aside>

        <!--右边-->
        <el-main>
          <!-- 路由出口 -->
          <router-view></router-view>
        </el-main>

      </el-container>

    </el-container>

  </div>
</template>

<script>

export default {
  computed: {
    // 计算出现在在哪个地方进行样式的高亮
    defaultActive () {
      return this.$route.path.slice(1).split('-')[0]
    }
  },
  data () {
    return {
      menuList: []
    }
  },
  created () {
    this.$axios.get('menus', {
      // headers: {
      //   Authorization: localStorage.getItem('token')
      // }
    }).then(res => {
      const { data, meta } = res
      if (meta.status === 200) {
        this.menuList = data
        // console.log(this.menuList)
      } else {
        this.$message.error(meta.msg)
      }
    })
  },
  methods: {

    // 退出功能
    logout () {
      // 弹出确认框
      this.$confirm('你确定要退出吗？？？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 清楚本地缓存
        localStorage.removeItem('token')
        // 跳转到登录页
        this.$router.push({ path: '/login' })
        this.$message({
          message: '退出成功'
        })
      }).catch(() => {
        this.$message({
          message: '已取消退出'
        })
      })
    }
  }
}
</script>

<style scoped lang="less">

  /*框架样式*/
  .Index, .el-container {
    width: 100%;
    height: 100%;
  }

  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
  }

  .el-aside {
    background-color: #545c64;
    color: #333;
    height: 100%;
  }

  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }

  body > .el-container {
    margin-bottom: 40px;
  }

  /*头部自己样式*/
  .el-header {
    padding: 0px 10px;
    height: 60px;
    background-color: #d8d8d8;

    display: flex;
    align-items: center;
    justify-content: space-between;

    img {
      height: 40px;
      padding-left: 30px;
    }

    h2 {
      color: #545c64;
    }

    span, a {
      font-size: 16px;
      font-weight: bold;
      padding-right: 6px;
    }

    a {
      font-size: 16px;
      font-weight: bold;
      color: orange;
    }

    /*左边*/

  }

</style>
